<template>
  <div class="right-drawer" v-show="show" transition="slider-right">
    <header-bar>
      <icon-button slot="left" v-on:click="close" icon="arrow_back"></icon-button>
      <div class="title">{{title}}</div>
      <div slot="right">
        <slot name="right"></slot>
      </div>
    </header-bar>
    <div class="right-drawer-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { closeRightDrawer } from '../../vuex/actions'
export default {
  vuex: {
      actions: {
        close: closeRightDrawer
      }
  },
  data () {
    return {
    }
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="less">
 .right-drawer{
   position: fixed;
   max-width: 450px;
   width: 100%;
   top: 0px;
   right: 0px;
   bottom: 0px;
   background: #fff;
   z-index: 10001;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 .slider-right-transition{
   transition: transform .3s;
   backface-visibility: hidden;
   &.slider-right-enter,
   &.slider-right-leave{
     transform: translate3d(100%; 0, 0);
   }
 }
 .right-drawer-content {
   height: 100%;
   overflow: auto;
 }
</style>
